<template>
  <div class="bg">
    <div ref="barChartData" class="bar"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  GridComponent, 
  BarChart, 
  CanvasRenderer
]);

export default {
  name: "newBarChartData",
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    times: {
      type: Number,
      default: 13
    },
  },
  components: {

  },
  data() {
    return {
      valueList: [],
      xAxisList: [],
      option: {
        grid: {
          // top: 0,
          left: 0,
          bottom: 35,
          containLabel: true
        },
        // color: 'rgb(145,204,117)',
        // title: {
        //   text: '品类交易额(万元)',
        //   left: 5,
        //   top: 10,
        //   textStyle: {
        //     color: 'white'
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}万元',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          // max: 9,//坐标轴刻度最大值。此时取数据在该轴上的最大值作为最大刻度
          axisLine: {
            show: true // 轴线
          },
          axisTick: {
            show: false
          },
          data: [],
          axisLabel: {
            color: 'white',
            fontSize: 14,
            fontWeight: 400,
            // rotate: 45,
          },
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true // 轴线
          },
          splitLine: {
            lineStyle: {
              // color: "white",
              type: 'dashed'
            }
          },
          axisLabel: {
            color: 'rgba(29, 252, 255, 1)',
            fontSize: 14,
            fontWeight: 400
          },
        },
        animation: false,
        series: [
          {
            type: 'bar',
            data: [],
            barWidth: 28,
            label: {
              show: true,
              color: 'white',
              fontStyle: 'normal',
              position: 'top',
              // align: 'left',
              fontSize: 14,
              fontWeight: 400,
              valueAnimation: true
            },
            itemStyle: {
              borderRadius: [14, 14, 0, 0],//设置圆柱圆角
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(51, 253, 207, 1)' },
                { offset: 1, color: 'rgba(6, 161, 150, 1)' }
              ])
            }
          }
        ]
      }
    }
  },
  computed: {

  },
  watch: {
    times(val) {
      if (val > 0) {
        this.$nextTick(() => {
          this.init()
        })
      }
    },
    dataList(val) {
      // this.$nextTick(() => {
      //   this.init()
      // })
    }
  },
  methods: {
    init() {
      this.handleList()
      this.option.series[0].data = this.valueList
      this.option.xAxis.data = this.xAxisList

      var chartDom = this.$refs.barChartData;
      var myChart = echarts.init(chartDom);
      myChart.setOption(this.option)
    },
    handleList() {
      if (this.dataList && this.dataList.length > 0) {
        this.valueList = []
        this.xAxisList = []

        this.dataList.forEach((item) => {
          var amount = Number((item.amount * this.times).toFixed(0))
          this.valueList.push(amount)
          this.xAxisList.push(item.name.slice(0, 2))
        })
      }
    }
  },
  created() {
    
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .bg {
    position: relative;
    height: 100% ;
    overflow: hidden;
  }
  .bar {
    position: absolute;
    top: 0;
    left: 20px;
    width: 100%;
    height: 100%;
  }
</style>